// 推荐管理
<template>
  <div class="role">
     <div class="role-content">
        <div class="role-top">
            <el-select v-model="paging.recommendType" placeholder="请选择用户状态">
                <el-option
                v-for="item in statelist"
                :key="item.value"
                :label="item.label"
                :value="item.value">
                </el-option>
            </el-select>
            <el-button type="primary" icon="el-icon-search" @click="role()">搜索</el-button>
            <el-button type="primary" icon="el-icon-edit" @click="addEquipment()">添加</el-button>
        </div>
        <!--内容 -->
        <el-card class="box-card">
             <el-table :data="listData" style="width: 100%"  border>
                <el-table-column  prop="id" label="推荐id"  sortable   > </el-table-column>
                <el-table-column prop="spuTitle" label="推荐产品"  > </el-table-column>
                <el-table-column prop="recommendType" label="推荐类型"  > 
                    <template slot-scope="scope">
                        <el-tag>{{scope.row.recommendType==1?'橱窗推荐':''}}</el-tag>
                    </template>
                </el-table-column>
                <el-table-column label="操作">
                    <template slot-scope="scope">
                        <el-button size="mini" type="danger" @click="handleDelete(scope.row)">删除</el-button>
                    </template>
                </el-table-column>
            </el-table>
        </el-card>
        <!-- 分页 -->
        <div class="block">
        <!-- current-change当前页size-change每页条数current-page当前页数，支持 .sync 修饰符page-sizes每页显示条目个数，支持 .sync 修饰符-->
        <Paging @handle="handles" :allPages="paging"></Paging>
      </div>
        <!-- 添加编辑 -->
        <el-dialog title="添加" :visible.sync="dialogFormVisible">
            <el-form :model="ruleForm" ref="ruleForm" :rules="rules">
            <el-form-item label="推荐类型" prop='recommendType' :label-width="formLabelWidth">
               <el-select v-model="ruleForm.recommendType" placeholder="请选择">
                <el-option
                v-for="item in statelist"
                :key="item.value"
                :label="item.label"
                :value="item.value">
                </el-option>
            </el-select>
            </el-form-item>
          <el-form-item label="推荐产品"  prop='spuId' :label-width="formLabelWidth">
           <el-cascader ref="cascader" :options="options" v-model="ruleForm.spuId" @change="handleChange" placeholder="关联产品"></el-cascader>
          </el-form-item>
            </el-form>
            <div slot="footer" class="dialog-footer">
                <el-button @click="dialogFormVisible = false">取 消</el-button>
                <el-button type="primary" @click="affirm(ruleForm)">确 定</el-button>
            </div>
        </el-dialog>
     </div>
  </div>
</template>
<script>
import Recommanage from'../../api/promotion/recommanage'
import Paging from "../../components/Paging"; //分页
export default {
components: {
    Paging
  },
  data() {
    return {
          statelist:[{
          value: '1',
          label: '橱窗推荐'
        },{
          value: '',
          label: '全部'
        }],
        options:[],//spu树
     // 分页
      paging:{
        recommendType: '',
        currentPage: 1,//当前的默认的页数
        eachpage: 10,//默认的页码
        total: 0,//初始值共数据条
        totalPageNo: 1,
      },
      listData:[],//初始化数据
      dialogFormVisible:false,
      FormVisible: false, //弹窗口
      select:[],//选中的权限'
      data:[],
      authoriId:'',
    // 弹框
    //   titleMap: {
    //     addEquipment:'新增',            
    //     editEquipment: "编辑"            
    //  },
     //  输入框
     formLabelWidth: '120px',
    //  输入框
     ruleForm:{
         recommendType :1,
         spuId:""
     },
      rules:{
         recommendType:[
           { required: true, message: '推荐类型', trigger: 'blur'}
        ],
         spuId:[
           { required: true, message: '推荐产品', trigger: 'blur'}
        ]
      },
     compileId:"",
     total:0,
     dialogStatus:"",
      currentPage:"",
      val: [],
      vals: [],
      spuIds:""
    }
  },
  created() {
    this.role()
    this.spUcategory()
  },
  methods: {
    handleChange() {
       this.ruleForm.spuId=this.$refs.cascader.getCheckedNodes()[0].data.id //获取选中的节点数组
    },
    // 分页负值
    handles(val) {
      this.allPages = val;
      this.role();
    },
    //数据详情
      role(){
        let _this=this
        Recommanage.recommanage(_this.paging).then(res=>{
            console.log(res)
            _this.listData=res.data.data.items
            _this.paging.currentPage=res.data.data.pageNo
            _this.paging.eachpage=res.data.data.pageSize
            _this.paging.total=res.data.data.total
            _this.paging.totalPageNo=res.data.data.totalPageNo
        })
      },
    // SPU树
    spUcategory(){
      Recommanage.category().then(res=>{
          this.options= this.getTreeData(res.data.data)
      })
    },
    // 递归判断列表，把最后的children设为undefined
    getTreeData(data){
      for(var i=0;i<data.length;i++){
        if(data[i].children.length<1){
          // children若为空数组，则将children设为undefined
          data[i].children=undefined;
        }else {
          // children若不为空数组，则继续 递归调用 本方法
          this.getTreeData(data[i].children);
        }
      }
      return data;
    },
    // 删除
      handleDelete(row){
      let _this=this
      let data={
        id:row.id,
        recommendType:_this.ruleForm.recommendType
      }
      _this.$confirm("此操作将永久删除, 是否继续?", "提示", {
          // 提示框
          confirmButtonText: "确定",
          cancelButtonText: "取消",
          type: "warning",
        })
        .then(() => {
          Recommanage.deletes(data).then((res) => {
            console.log(res)
            _this.$message({
              message: "恭喜你，删除成功",
              type: "success",
            });
          });
            _this.role();
        })
        .catch(() => {
          _this.$information.error("已取消删除");
        });
    },
    // 添加确认按钮
        affirm(ruleForm){
          let _this=this
          console.log(_this.ruleForm.spuId)
          let data={
            spuId:_this.ruleForm.spuId,
            recommendType:_this.ruleForm.recommendType
          }
          console.log(data)
        _this.$refs.ruleForm.validate((valid) => {
          if (valid) {
            Recommanage.addition(data).then(res=>{
              console.log(res)
                if (res.data.errmsg=='成功') {
                  _this.$message({
                    message: '恭喜你，添加成功',
                    type: 'success'
                    });
                }else{
                   _this.$message.error(res.data.errmsg);
                }
                 _this.dialogFormVisible = false;
                 _this.role()
            })
          } else {
           _this.$message.error('输入框不能为空！');
            return false;
          }
        });
    },
     // 添加
     addEquipment() {
        this.dialogFormVisible = true;
        // this.dialogStatus = 'addEquipment';
        this.ruleForm={}
    },
    },
}
</script>
<style scoped>
.role{
    width: 100%;
    line-height: 0px;
    overflow: hidden;
}
/* 添加编辑 */
.el-input{
    width: 300px;
}
.el-form/deep/.el-input__inner{
    width: 300px;
}
.el-form/deep/.el-form-item__content{
    width: 300px;
} 
>>>.el-dialog/deep/.el-dialog__header{
    width: 50px;
}
.el-form-item/deep/.el-form-item__error{
    text-indent:3rem
}
/* 分页 */
.block{
    width: 40%;
    padding-top: 20px;
}
/* 字体居中 */
.blue{
    background: #409EFF;
    color: #ffffff;
}
.el-table--enable-row-transition/deep/.el-table__body td {
   text-align: center;
}
.el-table/deep/th.is-sortable {
    cursor: pointer;
    text-align: center;
}
.el-table td, .el-table/deep/th.is-leaf {
    text-align: center;
}
/* 布局 */
.el-card/deep/.box-card{
  height: 50%;
   overflow: hidden;
}
.role-content{
    width: 96%;
    margin: auto;
    overflow: hidden;
}
.el-input{
    width: 200px;
    margin-right: 10px;
}
.role-top{
    width: 300px;
   line-height: 60px;
}
.role-top/deep/.el-select{
    margin-right: 10px;
}
.box-card{
   overflow: hidden;
}
</style>
